<template>
	<!-- 卡卷管理 -->
	<view>
		<view style="position: fixed;top: 0;left: 0;width: 100%;z-index: 999;">
			<u-tabs :list="tabList" :is-scroll="false" active-color='#FF9A0B' count="cate_count"
				inactive-color='#000000' :current="current" @change="change">
			</u-tabs>
		</view>

		<view class="" style="position: relative;top: 51px;" v-if="current==0">
			<x-shopDiscountCoupon :listweilingq="shoopCard" ExpiredList="立即领取" timer="有效期" :listweilingqs="true"
				@gotolingq="gotolingq">
			</x-shopDiscountCoupon>
		</view>

		<view class="" style="position: relative;top: 51px;" v-if="current==1">
			<x-shopDiscountCoupon :listlingqu="newshoopCard" ExpiredList="立即使用" timer="有效期" :listlingqus="true"
				@gotoshiy="gotoshiy">
			</x-shopDiscountCoupon>
			<u-loadmore :status="statuschange" :icon-type="iconType" :load-text="loadText" />
		</view>


		<view class="" style="position: relative;top: 51px;" v-if="current==2">
			<x-shopDiscountCoupon newshiy="已使用" timer="使用时间" :listshiyong="newshoopCard" :listshiyongs="true">
			</x-shopDiscountCoupon>
			<u-loadmore :status="statuschange" :icon-type="iconType" :load-text="loadText" />
		</view>
		<view class="" style="position: relative;top: 51px;" v-if="current==3">
			<x-shopDiscountCoupon newshiy="已失效" timer="失效时间" :convert="true" fscolor="#000000" :listshixiaos="true"
				:listshixiao="newshoopCard">
			</x-shopDiscountCoupon>
			<u-loadmore :status="statuschange" :icon-type="iconType" :load-text="loadText" />
		</view>
	</view>
</template>
<script>
	//receive 卡卷管理 点击领取优惠卷   
	//lst 已领取的优惠券列表
	// all//领取所有的优惠卷
	import {
		receive,
		lst,
		all
	} from '@/config/apiRouter.js'
	export default {
		data() {
			return {
				scrollH: '100vh',
				limit: 10,
				page: 1,
				status: 1, //参数123 
				loadText: {
					loadmore: '暂无更多',
					loading: '努力加载中',
					nomore: '哦豁！着 没有更多数据了'
				},
				total: '', //总数量
				last_page: '', //单次发送的请求获取的数据
				statuschange: 'loadmore',
				tabList: [{
					name: '代领取',
					cate_count: '' //0不显示
				}, {
					name: '已领取',
					cate_count: ''
				}, {
					name: '已使用',
					cate_count: ''
				}, {
					name: '已失效',
					cate_count: ''
				}],
				current: 0,
				// 待领取
				shoopCard: [],
				// 已领取// 已使用// // 已失效
				newshoopCard: [],
			}
		},
		onLoad(options) {
			if (options.current && options.status) {
				console.log(options, 'options')
				this.current = options.current;
				this.status = options.status;
				this.lstList(1);
			}

		},
		onShow() {
			this.shoopCard = [];
			this.newshoopCard = [];
			this.allList(); //获取所有优惠卷
		},
		methods: {
			onReachBottom() {
				// || this.last_page < this.limit
				// total总数
				if (this.total == 0 || this.total == this.newshoopCard.length) {
					console.log('结束')
					this.statuschange = "nomore";
					return;
				} else {
					this.statuschange = 'loading';
					this.page++;
					this.lstList(this.current);
				}
			},
			change(index) {
				this.current = index;
				this.status = index;
				this.page = 1;
				this.total = 0;
				if (index > 0) {
					this.lstList(index);
				} else {
					this.allList();
				}
				this.shoopCard = [];
				this.newshoopCard = [];
			},
			// 领取所有的优惠卷
			allList() {
				all().then(res => {
					console.log(res, 'ressss')
					this.shoopCard = res.data;
					if (res.data.length != 0) {
						this.tabList[0].cate_count = res.data.length; //没有分页应该是全部一次性返回的
					} else {
						this.tabList[0].cate_count = 0; //没有分页应该是全部一次性返回的
						console.log(this.tabList[0].cate_count, 'this.tabList[0].cate_count ')
					}
				})
			},
			// 卡卷管理  点击领取优惠卷   
			gotolingq(items) {
				receive({
					coupon_id: items.id,
					receive_type: items.receive_type,
				}).then(res => {
					this.allList();
					console.log(res, '卡卷管理')
				})
			},
			// 去使用
			gotoshiy(items) {
				uni.switchTab({
					url: '../../pages/Shopping-Mall/Shopping-Mall'
				})
			},
			// 已领取的优惠券列表 
			lstList(index) {
				lst({
					limit: this.limit,
					page: this.page,
					status: this.status
				}).then(res => {
					if (res.data.data.length != 0) {
						this.tabList[index].cate_count = res.data.total;
						this.newshoopCard.push(...res.data.data);
						this.total = res.data.total; //总数量
						this.last_page = res.data.last_page; //每个接口的数据 
					}
				})
			},

		}
	}
</script>

<style lang="scss">
	.shoop_card_box {
		padding: 0rpx 24rpx;

		.shoop_card {
			height: 172rpx;
			background: url(../../myIntegrateShoop/static/shoop_card.png);
			background-size: 100%;
			background-repeat: no-repeat;
			margin-bottom: 26rpx;
		}
	}

	.u-badge--bg--error.data-v-2b1712d8 {
		background-color: #FF9A0B !important;
	}
</style>
